<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>A simple demonstartion for the FreeGroup Draw2D 0.9.26 "scrollTo" method</title>
        <link type="text/css" rel="stylesheet" href="../demo.css" />

    <!-- common, all times required, imports -->        <!--REGEXP_START_REMOVE-->
	<SCRIPT src="../../String.js"></SCRIPT>
	<SCRIPT src="../../wz_jsgraphics.js"></SCRIPT>
	<SCRIPT src="../../events.js"></SCRIPT>
	<SCRIPT src="../../debug.js"></SCRIPT>
	<SCRIPT src="../../dragdrop.js"></SCRIPT>
	<SCRIPT src="../../UUID.js"></SCRIPT>
	<SCRIPT src="../../PositionConstants.js"></SCRIPT>
	<SCRIPT src="../../Graphics.js"></SCRIPT>
	<SCRIPT src="../../Color.js"></SCRIPT>
	<SCRIPT src="../../ArrayList.js"></SCRIPT>
	<SCRIPT src="../../Point.js"></SCRIPT>
	<SCRIPT src="../../Dimension.js"></SCRIPT>
	<SCRIPT src="../../Border.js"></SCRIPT>
	<SCRIPT src="../../LineBorder.js"></SCRIPT>
	<SCRIPT src="../../Figure.js"></SCRIPT>
	<SCRIPT src="../../Node.js"></SCRIPT>
        <SCRIPT src="../../VectorFigure.js"></SCRIPT>
        <SCRIPT src="../../SVGFigure.js"></SCRIPT>
	<SCRIPT src="../../Label.js"></SCRIPT>
	<SCRIPT src="../../Oval.js"></SCRIPT>
	<SCRIPT src="../../Circle.js"></SCRIPT>
	<SCRIPT src="../../Rectangle.js"></SCRIPT>
	<SCRIPT src="../../ImageFigure.js"></SCRIPT>
	<SCRIPT src="../../Port.js"></SCRIPT>
	<SCRIPT src="../../InputPort.js"></SCRIPT>
	<SCRIPT src="../../OutputPort.js"></SCRIPT>
	<SCRIPT src="../../Line.js"></SCRIPT>
	<SCRIPT src="../../ConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../NullConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../ManhattanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../BezierConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../FanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../Connection.js"></SCRIPT>
	<SCRIPT src="../../ConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../../ChopboxConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../../ConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../../ArrowConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../../CompartmentFigure.js"></SCRIPT>
	<SCRIPT src="../../CanvasDocument.js"></SCRIPT>
	<SCRIPT src="../../Annotation.js"></SCRIPT>
	<SCRIPT src="../../ResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../LineStartResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../LineEndResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../Canvas.js"></SCRIPT>
	<SCRIPT src="../../Workflow.js"></SCRIPT>
	<SCRIPT src="../../WindowFigure.js"></SCRIPT>
	<SCRIPT src="../../Button.js"></SCRIPT>
	<SCRIPT src="../../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../../SnapToHelper.js"></SCRIPT>
	<SCRIPT src="../../SnapToGeometry.js"></SCRIPT>
	<SCRIPT src="../../SnapToGeometryEntry.js"></SCRIPT>
	<SCRIPT src="../../SnapToGrid.js"></SCRIPT>
	<SCRIPT src="../../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../../ToolGeneric.js"></SCRIPT>
	<SCRIPT src="../../ToolPalette.js"></SCRIPT>
	<SCRIPT src="../../Dialog.js"></SCRIPT>
	<SCRIPT src="../../InputDialog.js"></SCRIPT>
	<SCRIPT src="../../PropertyDialog.js"></SCRIPT>
	<SCRIPT src="../../AnnotationDialog.js"></SCRIPT>
	<SCRIPT src="../../PropertyWindow.js"></SCRIPT>
	<SCRIPT src="../../ColorDialog.js"></SCRIPT>
	<SCRIPT src="../../LineColorDialog.js"></SCRIPT>
	<SCRIPT src="../../BackgroundColorDialog.js"></SCRIPT>
	<SCRIPT src="../../EditPartFactory.js"></SCRIPT>
	<SCRIPT src="../../AbstractObjectModel.js"></SCRIPT>
	<SCRIPT src="../../PropertyChangeEvent.js"></SCRIPT>
	<SCRIPT src="../../GraphicalViewer.js"></SCRIPT>
	<SCRIPT src="../../GraphicalEditor.js"></SCRIPT>
	<SCRIPT src="../../xmlsax.js"></SCRIPT>
	<SCRIPT src="../../xmlw3cdom.js"></SCRIPT>
	<SCRIPT src="../../XMLSerializer.js"></SCRIPT>
	<SCRIPT src="../../XMLDeserializer.js"></SCRIPT>
	<SCRIPT src="../../EditPolicy.js"></SCRIPT>

        <!-- undo/redo support (all times required too) -->
	<SCRIPT src="../../Command.js"></SCRIPT>
	<SCRIPT src="../../CommandStack.js"></SCRIPT>
	<SCRIPT src="../../CommandStackEvent.js"></SCRIPT>
	<SCRIPT src="../../CommandStackEventListener.js"></SCRIPT>
	<SCRIPT src="../../CommandAdd.js"></SCRIPT>
	<SCRIPT src="../../CommandDelete.js"></SCRIPT>
	<SCRIPT src="../../CommandMove.js"></SCRIPT>
	<SCRIPT src="../../CommandMoveLine.js"></SCRIPT>
	<SCRIPT src="../../CommandMovePort.js"></SCRIPT>
	<SCRIPT src="../../CommandResize.js"></SCRIPT>
	<SCRIPT src="../../CommandSetText.js"></SCRIPT>
	<SCRIPT src="../../CommandSetColor.js"></SCRIPT>
	<SCRIPT src="../../CommandSetBackgroundColor.js"></SCRIPT>
	<SCRIPT src="../../CommandConnect.js"></SCRIPT>
	<SCRIPT src="../../CommandReconnect.js"></SCRIPT>
	<SCRIPT src="../../Menu.js"></SCRIPT>
	<SCRIPT src="../../MenuItem.js"></SCRIPT>
	<SCRIPT src="../../mootools.js"></SCRIPT>
	<SCRIPT src="../../moocanvas.js"></SCRIPT>
        <!--REGEXP_END_REMOVE-->

        <!-- workflow specific imports -->
	<SCRIPT src="Server.js"></SCRIPT>
	<SCRIPT src="OverviewWindow.js"></SCRIPT>
</head>
<body onselectstart="return false;" style="margin:0px;padding:0px;" onkeydown="">
<div id="paintarea" style="position:absolute;left:0px;top:0px;width:1800px;height:2400px" >
    <!-- The information help text -->
    <div class="stickyNote">
    <center><b>FreeGroup Draw2D 0.9.26 0.7.1 - Simple demonstration of the FreeGroup Draw2D 0.9.26.<br>
    by Andreas Herz (a.herz @ freegroup.de)
    <br>
    </b>
    <br>
    <div style="color:red;font-size:9pt">Focus of this example: Show the "scrollTo()" method of the canvas object.</div>
    </center>
    <br>
    <center>See more on <a href="http://www.draw2d.org">FreeGroup Draw2D 0.9.26</a></center>
    </div>

</div>
<script>
  var workflow  = new draw2d.Workflow("paintarea");


  // Add an annotation to the workflow area
  //
  var annotation = new draw2d.Annotation("NOTE: Click on an entry in the overview window to scroll the window to the corresponding server icon");
  annotation.setDimension(250,70);
  workflow.addFigure(annotation,200,200);

  var annotation = new draw2d.Annotation("HINT: Show in the Server.js for backend AJAX communication.");
  annotation.setDimension(250,70);
  annotation.setBackgroundColor(new draw2d.Color(0,255,0));
  workflow.addFigure(annotation,200,280);


  var overviewWindow = new draw2d.OverviewWindow("Overview");
  workflow.addFigure(overviewWindow,10,150);

  // Add some example figures to the canvas
  //
  var s1 = new draw2d.Server("any_pkey1","165.230.22.3","up");
  workflow.addFigure(s1, 400,500);

  var s2 = new draw2d.Server("any_pkey2","www.google.de","down");
  workflow.addFigure(s2, 1200,300);

  var s3 = new draw2d.Server("any_pkey3","210.22.11.231","up");
  workflow.addFigure(s3, 1200,800);

  var s4 = new draw2d.Server("any_pkey4","165.230.22.7","up");
  workflow.addFigure(s4, 800,850);

  var s5 = new draw2d.Server("any_pkey23","165.230.22.9","up");
  workflow.addFigure(s5, 550,1500);

  var s6 = new draw2d.Server("any_pkey3456","165.230.221.3","down");
  workflow.addFigure(s6, 250,1000);

  var s7 = new draw2d.Server("any_pkey13245","65.231.22.3","up");
  workflow.addFigure(s7, 810,400);

  var s8 = new draw2d.Server("any_pkey13245","65.231.22.6","up");
  workflow.addFigure(s8, 550,1900);

  var s9 = new draw2d.Server("any_pkey13245","65.231.22.21","down");
  workflow.addFigure(s9, 1100,2050);

  overviewWindow.addServer(s1);
  overviewWindow.addServer(s2);
  overviewWindow.addServer(s3);
  overviewWindow.addServer(s4);
  overviewWindow.addServer(s5);
  overviewWindow.addServer(s6);
  overviewWindow.addServer(s7);
  overviewWindow.addServer(s8);
  overviewWindow.addServer(s9);

  
  window.onscroll=function(){workflow.onScroll();};

</script>
</body>
</html>
